<template>
  <div class='flex-col' style='width: 80%;padding-bottom: 100px;'>
    <card-title text='项目论证报告' />
    <div class='flex-col'>
      <span class='title'>一、项目研究目标</span>
      <p>1、主要目标</p>
      <div class='content'>
        <p>{{ mainTarget || '-' }}</p>
      </div>
      <p>2、研究内容</p>
      <div class='content'>
        <p>{{ researchContent || '-' }}</p>
      </div>
      <p>3、项目关键技术</p>
      <div class='content'>
        <p>1、技术难点</p>
        <p>{{ technicalDifficulties || '-' }}</p>
      </div>
      <div class='content'>
        <p>2、创新点</p>
        <p>{{ innovation || '-' }}</p>
      </div>
      <span class='title'>二、项目研究内容</span>
      <p>1、分年度计划进度</p>
      <p>1)、年度计划</p>
      <template v-if='pmDemonstrationYearProgressList.length'>
        <template v-for='(item, i) in pmDemonstrationYearProgressList'>
          <p>{{ item.year }}年</p>
          <div class='content'>{{ item.content }}</div>
        </template>
      </template>
      <div v-else class='content'>-</div>
      <p>2)、里程碑节点计划</p>
      <template v-if='pmDemonstrationMilestoneList.length'>
        <template v-for='(item, i) in pmDemonstrationMilestoneList'>
          <p>{{ item.nodeName }}</p>
          <div class='content'>{{ item.content }}</div>
        </template>
      </template>
      <span class='title'>三、验收标准与技术指标</span>
      <p>1、验收标准</p>
      <template v-if='pmDemonstrationAcceptanceCriteriaList.length'>
        <template v-for='(item, i) in pmDemonstrationAcceptanceCriteriaList'>
          <p>{{ item.criteriaName }}</p>
          <div class='content'>{{ item.content }}</div>
        </template>
      </template>
      <p>2、技术指标</p>
      <template v-if='pmDemonstrationTechnicalIndicatorList.length'>
        <template v-for='(item, i) in pmDemonstrationTechnicalIndicatorList'>
          <p>{{ item.indicatorName }}</p>
          <div class='content'>{{ item.content }}</div>
        </template>
      </template>
      <span class='title'>四、文档</span>
      <div class='content flex-row' v-if='file.link'>
        <span style='margin-right: 24px;'>{{ file.name }}</span>
        <div class='flex-row' style='margin-right: 16px;cursor: pointer;'>
          <a-icon type='eye' />
          预览
        </div>
        <div class='flex-row' style='cursor: pointer;' @click='downloadFile(file.link, file.name, file.type)'>
          <a-icon type='download' />
          下载
        </div>
      </div>
      <div class='content' v-else>暂无</div>
    </div>
  </div>
</template>

<script>
import CardTitle from '@/views/project/components/CardTitle.vue'
import { download, getDemon, getFileInfo } from '@/api/projectInitApply'

export default {
  name: 'projectDemonstration',
  components: { CardTitle },
  data() {
    return {
      mainTarget: '',
      researchContent: '',
      technicalDifficulties: '',
      innovation: '',
      pmDemonstrationYearProgressList: '',
      pmDemonstrationMilestoneList: '',
      pmDemonstrationAcceptanceCriteriaList: '',
      pmDemonstrationTechnicalIndicatorList: '',
      file: {
        name: '',
        link: '',
        type: ''
      }
    }
  },
  created() {
    getDemon({ projectApplicationId: this.$route.query.id }).then(res => {
      console.log(res)
      if (res.code == 200) {
        const {
          mainTarget, researchContent, technicalDifficulties, innovation,
          pmDemonstrationYearProgressList,
          pmDemonstrationMilestoneList,
          pmDemonstrationAcceptanceCriteriaList,
          pmDemonstrationTechnicalIndicatorList
        } = res.data
        this.mainTarget = mainTarget
        this.researchContent = researchContent
        this.technicalDifficulties = technicalDifficulties
        this.innovation = innovation
        // 年度计划
        this.pmDemonstrationYearProgressList = pmDemonstrationYearProgressList
        // 里程碑节点计划
        this.pmDemonstrationMilestoneList = pmDemonstrationMilestoneList
        // 验收标准
        this.pmDemonstrationAcceptanceCriteriaList = pmDemonstrationAcceptanceCriteriaList
        // 技术指标
        this.pmDemonstrationTechnicalIndicatorList = pmDemonstrationTechnicalIndicatorList
        if (res.data.file) {
          getFileInfo({ ids: res.data.file }).then(resp => {
            console.log(resp)
            if (resp.code == 200) {
              if (resp.data.length && resp.data[0]) {
                this.file.link = resp.data[0].url
                this.file.name = resp.data[0].name
                this.file.type = resp.data[0].type
              }
            }
          })
        }
      }
    })
  },
  methods: {
    downloadFile(url, fileName, type) {
      download({ url }).then((response) => {
        const file = new Blob(
          [response],
          { type }
        )
        const fileURL = URL.createObjectURL(file)
        const fileLink = document.createElement('a')
        fileLink.href = fileURL
        fileLink.setAttribute('download', fileName)
        document.body.appendChild(fileLink)
        fileLink.click()
        URL.revokeObjectURL(fileURL)
        document.body.removeChild(fileLink)
      })
        .catch((error) => {
          console.error('Download error:', error)
        })
    }
  }
}
</script>

<style scoped lang='less'>
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin: 16px 0;
}

.content {
  border: solid 1px rgb(232, 232, 232);
  padding: 12px;
  margin-left: 30px;
  width: 100%;
  margin-bottom: 8px;
}
</style>